<template>
  <transition name="fade">
    <div v-if="visible" class="confetti-overlay" @click="hide">
      <div class="confetti-center">
        <slot>成就达成！</slot>
      </div>
      <div class="particles">
        <span v-for="n in 36" :key="n" class="p" :style="styleFor(n)"></span>
      </div>
    </div>
  </transition>
  
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const visible = ref(false)
let timer = null

function show(ms = 1800) {
  visible.value = true
  clearTimeout(timer)
  timer = setTimeout(() => { visible.value = false }, ms)
}
function hide() { visible.value = false; clearTimeout(timer) }

function styleFor(i){
  const angle = (i / 36) * 360
  const delay = Math.random() * 200
  const color = [ '#c8102e', '#e76f51', '#f4a261', '#2a9d8f', '#e9c46a' ][i % 5]
  return {
    '--angle': angle + 'deg',
    '--delay': delay + 'ms',
    '--color': color
  }
}

defineExpose({ show, hide })
</script>

<style scoped>
.confetti-overlay { position: fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index: 9999; }
.confetti-overlay::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.12); backdrop-filter: blur(2px); }
.confetti-center { position:relative; z-index:1; background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.06); padding:14px 18px; border-radius:14px; font-weight:700; color:#a3521b; box-shadow:0 10px 30px rgba(0,0,0,0.15); }
.particles { position:absolute; inset:0; pointer-events:none; }
.p { position:absolute; left:50%; top:50%; width:8px; height:8px; background: var(--color); border-radius:2px; transform-origin: 0 0; opacity:0; animation: burst 900ms ease-out var(--delay) both; }

@keyframes burst {
  0% { transform: rotate(var(--angle)) translate(0,0); opacity: 1; }
  100% { transform: rotate(var(--angle)) translate(0, -220px); opacity: 0; }
}

.fade-enter-active, .fade-leave-active { transition: opacity .25s; }
.fade-enter-from, .fade-leave-to { opacity:0; }
</style>
